<template>
  <div class="vivid-rating">
    <input value="5" name="rating" id="star5" type="radio" v-model="value">
    <label for="star5"></label>
    <input value="4" name="rating" id="star4" type="radio" v-model="value">
    <label for="star4"></label>
    <input value="3" name="rating" id="star3" type="radio" v-model="value">
    <label for="star3"></label>
    <input value="2" name="rating" id="star2" type="radio" v-model="value">
    <label for="star2"></label>
    <input value="1" name="rating" id="star1" type="radio" v-model="value">
    <label for="star1"></label>
  </div>

</template>
<script setup lang="ts">
const value = defineModel({ type: Number, default: 0 })
</script>
<style scoped>
.vivid-rating {
  display: inline-block;
}

.vivid-rating input {
  display: none;
}

.vivid-rating label {
  float: right;
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
}

.vivid-rating label:before {
  content: '\2605';
  font-size: 30px;
}

.vivid-rating input:checked~label,
.vivid-rating label:hover,
.vivid-rating label:hover~label {
  color: #6f00ff;
  transition: color 0.3s;
}
</style>
